<template>
	<view class="home">
		<view class="home-head">
			<!-- <image src="/static/icon/bgimg.png" mode="" class="bgimgs"></image> -->
			<view class="user">
				<view class="user-img"><image src="/static/icon/head.jpg" mode=""></image></view>
				<view class="user-name">888个人店主<text>（广州市公司）</text></view>
				<view class="user-info" @tap="infoBtn"><image src="/static/news.png" mode="widthFix" class="news" /></view>
			</view>
		</view>
		<view class="home-tool">
			<view class="title">常用工具</view>
			<view class="list">
				<view class="list-txt" v-for="(item,index) in toolData" :key='index' @tap="toolBtn(item)">
					<image :src="item.icon" mode=""></image>
					<view class="">{{item.title}}</view>
				</view>
				
			</view>
		</view>
		<view class="home-popularize">
			<view class="head">
				<view class="head-sign"></view>
				<view class="head-txt">商品推广收益</view>
				<view class="head-right" @tap="popularizeBtn">明细</view>
			</view>
			<view class="content">
				<view class="content-list" v-for="(item,index) in popularizeData" :key='index'>
					<view class="txt" :class="{'red':item.color}">{{item.txt}}</view>
					<view class="title">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="home-expand">
			<view class="head">
				<view class="head-sign"></view>
				<view class="head-txt">渠道拓展收益</view>
				<view class="head-right" @tap="expandBtn">明细</view>
			</view>
			<view class="content">
				<view class="content-list" v-for="(item,index) in expandData" :key="index">
					<view class="txt" :class="{'red':item.color}">{{item.txt}}</view>
					<view class="title">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="home-appreciation">
			<view class="head">
				<view class="head-sign"></view>
				<view class="head-txt">商家增值/收益</view>
				<view class="head-right" @tap="shopBtn">明细</view>
			</view>
			<view class="content">
				<view class="content-list" v-for="(item,index) in appreciationData" :key='index'>
					<view class="txt" :class="{'red':item.color}">{{item.txt}}</view>
					<view class="title">{{item.title}}</view>
				</view>
			</view>
		</view>
		<personal-tab-bar :current="0" backgroundColor="#FFFFFF" color="#9597A6" tintColor="rgba(0, 144, 250, 1)"></personal-tab-bar>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				toolData:[
					{title:'商品推广',icon:'/static/icon/tuiguang.png',url:''},
					{title:'拓展个人店',icon:'/static/icon/geren.png',url:'pages/particulars/index?type=1'},
					{title:'拓展商家',icon:'/static/icon/tuozang.png',url:'pages/particulars/index?type=2'},
					{title:'加入合伙人',icon:'/static/icon/hehuo.png',url:'pages/particulars/index?type=3'}
				],
				popularizeData:[
					{title:'今日订单数',txt:'10'},
					{title:'今日新增会员',txt:'300'},
					{title:'今日推广收益',txt:'￥500.00',color:true}
				],
				expandData:[
					{title:'拓展个人店',txt:'16'},
					{title:'拓展商家',txt:'68'},
					{title:'拓展合伙人',txt:'2'},
					{title:'个人店收益',txt:'￥266.00',color:true},
					{title:'商家提现收益',txt:'￥160.00',color:true},
					{title:'合伙人收益',txt:'￥2666.00',color:true}
				],
				appreciationData:[
					{title:'软件工具收益',txt:'￥160.00',color:true}
				]
			}
		},
		onLoad() {
			
		},
		methods:{
			popularizeBtn(){
				uni.navigateTo({
					url:'pages/detail/index?type=1'
				})
			},
			expandBtn(){
				uni.navigateTo({
					url:'pages/detail/index?type=2'
				})
			},
			shopBtn(){
				uni.navigateTo({
					url:'pages/detail/index?type=3'
				})
			},
			toolBtn(item){
				uni.navigateTo({
					url:item.url
				})
			},
			infoBtn(){
				uni.navigateTo({
					url:'../my/pages/information/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.home{
		&-expand{
			width:700rpx;
			height:557rpx;
			background:rgba(255,255,255,1);
			box-shadow:0rpx 6rpx 12rpx rgba(0,0,0,0.16);
			border-radius: 20rpx;
			margin-left: 22rpx;
			margin-top: 42rpx;
			padding: 30rpx 22rpx;
			
			opacity:1;
			.head{
				display: flex;
				align-items: center;
				padding-bottom: 28rpx;
				border-bottom: 2rpx solid rgba(236, 236, 236, 1);
				&-sign{
					width:8rpx;
					height:40rpx;
					background:rgba(182, 86, 255, 1);
					opacity:1;
					margin-right: 32rpx;
				}
				&-txt{
					font-size:32rpx;
					font-family:PingFang SC;
					font-weight:bold;
					color:rgba(28,28,28,1);
					opacity:1;
					
				}
				&-right{
					margin-left: auto;
					font-size:26rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(77,77,77,1);
					opacity:1;
				}
			}
			.content{
				
				display: flex;
				margin-top: 56rpx;
				padding: 0 8rpx;
				flex-wrap: wrap;
				&-list{
					flex: 1;
					// width: 30%;
					min-width: 30%;
					// max-width: 30%;
					// margin-right: 20rpx;
					// padding-left: 20rpx;
					padding: 30rpx 20rpx;
					border-right: 2rpx solid rgba(236, 236, 236, 1);
					border-bottom: 2rpx solid rgba(236, 236, 236, 1);
					.txt{
						font-size:30rpx;
						font-family:Arial;
						font-weight:bold;
						color:rgba(66,79,104,1);
						opacity:1;
						
					}
					.red{
						color: rgba(242, 85, 85, 1);
					}
					.title{
						font-size:26rpx;
						font-family:PingFang SC;
						font-weight:400;
						color:rgba(138,138,138,1);
						opacity:1;
						margin-top: 26rpx;
					}
				}
				&-list:nth-child(3){
					border-right: none;
				}
				&-list:nth-child(4){
					border-bottom: none;
				}
				&-list:nth-child(5){
					border-bottom: none;
				}
				&-list:nth-child(6){
					border-bottom: none;
					border-right: none;
				}
			}
			
		}
		&-appreciation{
			width:700rpx;
			height:334rpx;
			background:rgba(255,255,255,1);
			box-shadow:0rpx 6rpx 12rpx rgba(0,0,0,0.16);
			opacity:1;
			border-radius: 20rpx;
			margin-top: 40rpx;
			margin-left: 22rpx;
			padding: 30rpx 22rpx;
			margin-bottom: 120rpx;
			.head{
				display: flex;
				align-items: center;
				padding-bottom: 28rpx;
				border-bottom: 2rpx solid rgba(236, 236, 236, 1);
				&-sign{
					width:8rpx;
					height:40rpx;
					background:rgba(252, 207, 77, 1);
					opacity:1;
					margin-right: 32rpx;
				}
				&-txt{
					font-size:32rpx;
					font-family:PingFang SC;
					font-weight:bold;
					color:rgba(28,28,28,1);
					opacity:1;
					
				}
				&-right{
					margin-left: auto;
					font-size:26rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(77,77,77,1);
					opacity:1;
				}
			}
			.content{
				display: flex;
				margin-top: 56rpx;
				padding: 0 8rpx;
				&-list{
					flex: 1;
					margin-right: 20rpx;
					padding-left: 20rpx;
					.txt{
						font-size:30rpx;
						font-family:Arial;
						font-weight:bold;
						color:rgba(66,79,104,1);
						opacity:1;
						
					}
					.red{
						color: rgba(242, 85, 85, 1);
					}
					.title{
						font-size:26rpx;
						font-family:PingFang SC;
						font-weight:400;
						color:rgba(138,138,138,1);
						opacity:1;
						margin-top: 26rpx;
					}
				}
			}
		}
		&-popularize{
			width:700rpx;
			height:308rpx;
			background:rgba(255,255,255,1);
			box-shadow:0rpx 6rpx 12rpx rgba(0,0,0,0.16);
			opacity:1;
			border-radius: 20rpx;
			margin-top: 130rpx;
			margin-left: 22rpx;
			padding: 30rpx 22rpx;
			.head{
				display: flex;
				align-items: center;
				padding-bottom: 28rpx;
				border-bottom: 2rpx solid rgba(236, 236, 236, 1);
				&-sign{
					width:8rpx;
					height:40rpx;
					background:rgba(32,222,203,1);
					opacity:1;
					margin-right: 32rpx;
				}
				&-txt{
					font-size:32rpx;
					font-family:PingFang SC;
					font-weight:bold;
					color:rgba(28,28,28,1);
					opacity:1;
					
				}
				&-right{
					margin-left: auto;
					font-size:26rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(77,77,77,1);
					opacity:1;
				}
			}
			.content{
				display: flex;
				margin-top: 56rpx;
				padding: 0 8rpx;
				&-list{
					flex: 1;
					margin-right: 20rpx;
					padding-left: 20rpx;
					.txt{
						font-size:30rpx;
						font-family:Arial;
						font-weight:bold;
						color:rgba(66,79,104,1);
						opacity:1;
						
					}
					.red{
						color: rgba(242, 85, 85, 1);
					}
					.title{
						font-size:26rpx;
						font-family:PingFang SC;
						font-weight:400;
						color:rgba(138,138,138,1);
						opacity:1;
						margin-top: 26rpx;
					}
				}
			}
		}
		&-tool{
			width:702rpx;
			height:306rpx;
			background:rgba(255,255,255,1);
			box-shadow:0rpx 6rpx 12rpx rgba(0,0,0,0.1);
			opacity:1;
			position: absolute;
			border-radius: 20rpx;
			left: 22rpx;
			top: 200rpx;
			padding: 32rpx;
			.title{
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:bold;
				color:rgba(3,3,3,1);
				opacity:1;
			}
			.list{
				// width: 100%;
				display: flex;
				margin-top: 36rpx;
				text-align: center;
				&-txt{
					flex: 1;
					image{
						width:72rpx;
						height:72rpx;
						opacity:1;
						border-radius:12rpx;
					}
					view{
						font-size:24rpx;
						font-family:PingFang SC;
						font-weight:400;
						color:rgba(3,3,3,1);
						opacity:1;
						margin-top: 22rpx;
					}
				}
				
			}
		}
		&-head{
			width:100%;
			height:402rpx;
			// background:rgba(64, 173, 253, 1);
			background: url(../../../../static/icon/bgimg.png) no-repeat;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 92rpx 22rpx 0 22rpx;
			opacity:1;
			.bgimgs{
				position: absolute;
				width: 100%;
				// height: 100%;
				left: 0;
				top: 0;
			}
			.user{
				display: flex;
				align-items: center;
				
				&-img{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 16rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				&-name{
					font-size:32rpx;
					font-family:PingFang SC;
					font-weight:bold;
					color:rgba(255,255,255,1);
					
					opacity:1;
					text{
						font-size:24rpx;
						font-family:PingFang SC;
						font-weight:bold;
						color:rgba(255,255,255,1);
						
						opacity:1;
					}
				}
				&-info{
					margin-left: auto;
					width: 44rpx;
					// position: absolute;
					right: 30rpx;
				}
			}
		}
	}
</style>
